<template>
	<view class="bg-white flex flex-direction" style="height: 100vh; width: 100vw;">
		<view style="padding: 32rpx;">
			<text class="cuIcon-close text-black" @tap="BackPage" style="font-size: 50rpx; font-weight: bold;"></text>
		</view>

		<view style="padding: 32rpx; font-size: 50rpx; font-weight: bold; color: #000000;">
			输入新手机号
		</view>

		<view style="margin-top: 160rpx; padding: 0 32rpx; ">
			<view class="flex justify-start align-center solid-bottom" style="height: 104rpx;">
				<text style="font-size: 40rpx; color: #1C1C1E;">+86</text>
				<input v-model="mobile" placeholder="请输入新手机号" maxlength="13"
					style="margin-left: 22rpx; font-size: 40rpx;" />
				<text v-if="mobile && mobile.length>0" class='cuIcon-roundclose text-gray' @click="mobile=''"
					style="margin-left: 60rpx;font-size: 40rpx;"></text>
			</view>
		</view>
		
		<view style="margin-top: 200rpx;">
			<button type="default" @click="send" style="width: 656rpx;height: 96rpx;background: #007AFF; color: #FFFFFF;">获取短信验证码</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
			}
		},
		methods: {
			send() {
				this.$Router.push({
					name: 'newMobile-captcha',
					params: {
						mobile: this.mobile
					}
				})
			},
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		watch: {
			mobile(newValue, oldValue) {
				this.mobile = this.mobile.replace(/\s/g, '').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3').trim();
			}
		}
	}
</script>

<style>
</style>
